<template>
       <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible2"
        width="30%"
        lock-scroll
        append-to-body
        center
        >
        <div slot="title" class="dialog-title">
            <i class="el-icon-warning"></i>
            <span class="title-text">{{dialogTitle}}</span>
            <div class="button-right">
                <span class="title-close" @click="cancel"></span>
            </div>
        </div>

        <div>
            <div class="messageBox">
                <div class="el-message-box__message"><p>{{promptInfo}}</p></div>
            </div>
            <div v-if="showBox" class="msg-box">{{msgErr}}</div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="shouInfoHandel">显示详情</el-button>
            <el-button @click="cancelHandel">取 消</el-button>
            <el-button type="primary" @click="successHandel">确 定</el-button>
        </span>
        </el-dialog>

</template>

<script>
  export default {
      props:{
        dialogTitle:[String],
        msgErr:[String],
        promptInfo:[String],
          dialogVisible: {
            type: Boolean,
            default: false,
            },
        
		},
    // import引入的组件需要注入到对象中才能使用
    components: {},
    // 这里存放数据
    data () {
      return {
          isShouInfo:false,
          showBox:false,
          dialogVisible2: false,
 
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {},
    mounted () {},
    // 方法集合
    methods: {
        cancel(){
             this.dialogVisible=false;
        },
        shouInfoHandel(){
            if(!this.isShouInfo){
                this.isShouInfo=true;
                this.showBox=true;
            }else{
                this.isShouInfo=false;
                this.showBox=false;
            }
        },
        // 取消的函数
        cancelHandel(){
            this.cancelCallback();
        },
        successHandel(){
            this.successCallback();
        },
        // 成功的回调函数
        successCallback(){
            this.dialogVisible2=false;
            this.$emit("successCallback")
            
        },
        //取消执行的回调函数
        cancelCallback(){
            this.dialogVisible2=false;
  
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
     watch: {
        dialogVisible(newVal) {
            
          this.dialogVisible2 = newVal;
        },

        dialogVisible2(newVal) {
            
          this.$emit("update:dialogVisible", newVal);
        },
  },
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated () {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate () {},
    // 生命周期 - 数据挂载之前 
    beforeMount () {},
    // 生命周期 - 数据更新之前 
    beforeUpdate() {},
    // 生命周期 - 数据更新之后 
    updated () {},
    // 生命周期 - 页面销毁之前 
    beforeDestroy() {},
    // 生命周期 - 页面销毁完成 
    destroyed () {},
  }
</script>

<style scoped>
  /* @import url(); 引入公共css类 */
.messageBox{
    position:relative;
}
.el-message-box__status.el-icon-warning {
    color: #e6a23c;
}
.msg-box{
    padding-top:0.2rem;
    text-align:center;
    color:red
}
.el-message-box__message{
    text-align: center
}
.el-icon-warning{
    color:#e6a23c;
    margin-right:0.05rem;
    font-size:0.19rem;
}
.title-text{
   font-size:0.18rem;
}
</style>